/*
 * Copyright 2016 balena.io
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$icon-font-path: "../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
$font-size-base: 16px;
$cursor-disabled: initial;
$link-hover-decoration: none;
$btn-min-width: 170px;
$link-color: #ddd;
$disabled-opacity: 0.2;

@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "./modules/theme";
@import "./modules/bootstrap";
@import "./modules/space";
@import "./components/label";
@import "./components/badge";
@import "./components/caption";
@import "./components/button";
@import "./components/tick";
@import "../components/drive-selector/styles/drive-selector";
@import "../pages/main/styles/main";
@import "../pages/finish/styles/finish";

$fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";

@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid";

@font-face {
  font-family: "Nunito";
  src: url("Nunito-Regular.eot");
  src: url("./fonts/Nunito-Regular.eot?#iefix") format("embedded-opentype"),
      url("./fonts/Nunito-Regular.woff2") format("woff2"),
      url("./fonts/Nunito-Regular.woff") format("woff"),
      url("./fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Nunito";
  src: url("Nunito-Bold.eot");
  src: url("./fonts/Nunito-Bold.eot?#iefix") format("embedded-opentype"),
      url("./fonts/Nunito-Bold.woff2") format("woff2"),
      url("./fonts/Nunito-Bold.woff") format("woff"),
      url("./fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Nunito";
  src: url("Nunito-Light.eot");
  src: url("./fonts/Nunito-Light.eot?#iefix") format("embedded-opentype"),
      url("./fonts/Nunito-Light.woff2") format("woff2"),
      url("./fonts/Nunito-Light.woff") format("woff"),
      url("./fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "CircularStd";
  src: url("./fonts/CircularStd-Bold.eot");
  src: url("./fonts/CircularStd-Bold.eot?#iefix") format("embedded-opentype"),
      url("./fonts/CircularStd-Bold.woff2") format("woff2"),
      url("./fonts/CircularStd-Bold.woff") format("woff"),
      url("./fonts/CircularStd-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "CircularStd";
  src: url("./fonts/CircularStd-Book.eot");
  src: url("./fonts/CircularStd-Book.eot?#iefix") format("embedded-opentype"),
      url("./fonts/CircularStd-Book.woff2") format("woff2"),
      url("./fonts/CircularStd-Book.woff") format("woff"),
      url("./fonts/CircularStd-Book.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "CircularStd";
  src: url("./fonts/CircularStd-Medium.eot");
  src: url("./fonts/CircularStd-Medium.eot?#iefix") format("embedded-opentype"),
      url("./fonts/CircularStd-Medium.woff2") format("woff2"),
      url("./fonts/CircularStd-Medium.woff") format("woff"),
      url("./fonts/CircularStd-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.circular {
  font-family: "CircularStd";
  font-weight: 500;
}
.nunito {
  font-family: "Nunito";
}

body {
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  font-family: "CircularStd";

  > header {
    flex: 0 0 auto;
  }

  > main {
    flex: 1;
    display: flex;
  }

  > footer {
    flex: 0 0 auto;
  }
}

.section-loader {
  webview {
    flex: 0 1;
    height: 0;
    width: 0;
  }

  &.isFinish webview {
    flex: initial;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 320px;
  }
}

.wrapper {
  height: 100%;
  margin: 20px 50px;
}

.featured-project {
  webview {
    flex: 0 1;
    height: 0;
    width: 0;
  }

  &.fp-visible webview {
    width: 480px;
    height: 360px;
    position: absolute;
    z-index: 1;
    left: 30px;
    top: 45px;
    border-radius: 7px;
    overflow: hidden;
  }
}
